<%--
  Created by IntelliJ IDEA.
  User: Chelsea
  Date: 2021/2/6
  Time: 17:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<html>
<head>
    <%
        pageContext.setAttribute("APP_PATH",request.getContextPath());
    %>
    <title>员工列表</title>
    <script src="${APP_PATH}/static/js/jquery-3.5.1.min.js"></script>
    <script src="${APP_PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <link href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

    <!-- 员工修改的模态框 -->
    <div class="modal fade" id="empUpdateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">员工修改</h4>
                </div>
                <div class="modal-body">
                    <%--模态框的主体，员工添加的form表单--%>
                    <form class="form-horizontal">
                        <%--员工姓名输入框--%>
                        <div class="form-group">
                            <label for="emp_name_input" class="col-sm-2 control-label">empName</label>
                            <div class="col-sm-10">
                                <p class="form-control-static" id="emp_name_update_static"></p>
                            </div>
                        </div>
                        <%--email输入框--%>
                        <div class="form-group">
                            <label for="emp_email_input" class="col-sm-2 control-label">email</label>
                            <div class="col-sm-10">
                                <input type="email" name="email" class="form-control" id="emp_email_update" placeholder="email@foxmail.com">
                                <span class="help-block"></span>
                            </div>
                        </div>
                        <%--性别选择框--%>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">gender</label>
                            <div class="col-sm-10">
                                <label class="radio-inline">
                                    <input type="radio" name="gender" id="gender_add_update_1" value="M" checked="checked"> 男
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="gender" id="gender_add_update_2" value="F"> 女
                                </label>
                            </div>
                        </div>
                        <%--部门选择器--%>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">depName</label>
                            <div class="col-sm-4">
                                <%--选择部门Id提交即可--%>
                                <select class="form-control" name="dId" id="dept_add_select"></select>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="emp_update_btn">更新</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 新增员工信息的模态框 -->
    <div class="modal fade" id="empAddModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">员工添加</h4>
                </div>
                <div class="modal-body">
                    <%--模态框的主体，员工添加的form表单--%>
                        <form class="form-horizontal">
                            <%--员工姓名输入框--%>
                            <div class="form-group">
                                <label for="emp_name_input" class="col-sm-2 control-label">empName</label>
                                <div class="col-sm-10">
                                    <%--placeholder为默认显示值--%>
                                    <input type="text" name="empName" class="form-control" id="emp_name_input" placeholder="empName">
                                    <span class="help-block"></span>
                                </div>
                            </div>
                            <%--email输入框--%>
                            <div class="form-group">
                                <label for="emp_email_input" class="col-sm-2 control-label">email</label>
                                <div class="col-sm-10">
                                    <input type="email" name="email" class="form-control" id="emp_email_input" placeholder="email@foxmail.com">
                                    <span class="help-block"></span>
                                </div>
                            </div>
                            <%--性别选择框--%>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">gender</label>
                                <div class="col-sm-10">
                                    <label class="radio-inline">
                                        <input type="radio" name="gender" id="gender_add_input_1" value="M" checked="checked"> 男
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" name="gender" id="gender_add_input_2" value="F"> 女
                                    </label>
                                </div>
                            </div>
                            <%--部门选择器--%>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">depName</label>
                                <div class="col-sm-4">
                                    <%--选择部门Id提交即可--%>
                                    <select class="form-control" name="dId" id="dept_add_select"></select>
                                </div>
                            </div>
                        </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="emp_save_btn">保存</button>
                </div>
            </div>
        </div>
    </div>

    <%--搭建前端显示页面--%>
    <div class="container">
        <%--标题--%>
        <div class="row">
            <div class="col-md-12">
                <h1>SSM-CRUD</h1>
            </div>
        </div>
        <%--按钮--%>
        <div class="row">
            <div class="col-md-4 col-md-offset-8">
                <button class="btn btn-success" id="emp_add_model_btn">新增</button>
                <button class="btn btn-danger" id="emp_delete_all_model_btn">删除</button>
            </div>
        </div>
        <%--表格--%>
        <div class="row">
            <div class="col-md-12">
                <table class="table table-striped" id="emps_tables">
                    <thead>
                        <tr>
                            <th>
                                <input type="checkbox" id="check_all"/>
                            </th>
                            <th>#</th>
                            <th>empName</th>
                            <th>gender</th>
                            <th>E-mail</th>
                            <th>department</th>
                            <th>perform</th>
                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
        </div>
        <%--分页信息--%>
        <div class="row">
            <%--分页文字信息--%>
            <div class="col-md-6" id="page_info_area"></div>
            <%--分页条--%>
            <div class="col-md-6" id="page_nav_area"></div>
        </div>
    </div>

    <%--员工信息显示的js代码--%>
    <script type="text/javascript">

        //此变量为全局变量，记录所有成员的总记录数，用于保存一个无穷大值，跳转到最后一页
        var totalRecord;
        //此变量为全局变量，表示目前的页码数
        var currentNum;

        //页面加载完成后，直接发送一个ajax请求，获取请求数据
        $(function (){
            /*去首页*/
            to_page(1);
        });

        /*跳转到某一页的方法*/
        function to_page(page) {
            $.ajax({
                url:"${APP_PATH}/emps",
                data:"page="+page,
                type:"GET",
                success:function (result) {
                    console.log(result);
                    //1.解析并显示员工数据
                    build_emps_table(result);
                    //2.解析并显示分页信息
                    build_page_info(result);
                    //3.解析显示分页条
                    build_page_nav(result);
                }
            });
        }

        /*解析显示员工信息*/
        function build_emps_table(result) {

            /*每次刚进来，先进行清空*/
            $("#emps_tables tbody").empty();

            var emps = result.extend.pageInfo.list;
            $.each(emps, function (index, item) {
                var checkBoxTD = $("<td><input type='checkbox' class='check_item'/></td>");
                var empIdTd = $("<td></td>").append(item.empId);
                var empNameTD = $("<td></td>").append(item.empName);
                var genderTd = $("<td></td>").append(item.gender == "M" ? "男" : "女");
                var emailTd = $("<td></td>").append(item.email);
                var deptName = $("<td></td>").append(item.department.deptName);
                /**
                 * <button class="btn btn-success btn-sm">
                 <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
                 编辑
                 </button>
                 * */
                var editBtn = $("<button></button>").addClass("btn btn-success btn-sm edit_btn")
                    .append($("<span></span>").addClass("glyphicon glyphicon-pencil")).append("编辑");
                //为编辑按钮添加自定义的属性来表示当前员工id
                editBtn.attr("edit-id",item.empId);
                var deleBtn = $("<button></button>").addClass("btn btn-danger btn-sm delete_btn")
                    .append($("<span></span>").addClass("glyphicon glyphicon-remove")).append("删除");
                //将此条信息的id添加到删除按钮
                deleBtn.attr("delete-id",item.empId);

                var btnTd = $("<td></td>").append(editBtn).append(" ").append(deleBtn);
                //append方法每次追加后还是返回之前的元素，所以可以链式操作
                $("<tr></tr>")
                    .append(checkBoxTD)
                    .append(empIdTd)
                    .append(empNameTD)
                    .append(genderTd)
                    .append(emailTd)
                    .append(deptName)
                    .append(btnTd)
                    .appendTo("#emps_tables tbody");
            });
        }

        /*解析显示分页信息*/
        function build_page_info(result) {

            /*每次刚进来，先进行清空*/
            $("#page_info_area").empty();

            $("#page_info_area").append("当前"+result.extend.pageInfo.pageNum+"页,总"+
                result.extend.pageInfo.pages+"页,总"+
                result.extend.pageInfo.total+"共条记录");

            totalRecord =  result.extend.pageInfo.total;
            currentNum = result.extend.pageInfo.pageNum;
        }

        /*解析显示分页条*/
        function build_page_nav(result) {

            /*每次刚进来，先进行清空*/
            $("#page_nav_area").empty();

            var ul = $("<ul></ul>").addClass("pagination");

            /*构建元素*/
            var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("herf", "#"));
            var prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;"));

            /*如果没有前一页，则首页和前一页不可点击*/
            if (result.extend.pageInfo.hasPreviousPage==false) {
                firstPageLi.addClass("disabled");
                prePageLi.addClass("disabled");
            }else {
                /*添加单击事件*/
                firstPageLi.click(function () {
                    to_page(1);
                });
                prePageLi.click(function () {
                    to_page(result.extend.pageInfo.pageNum-1);
                });
            }

            /*构建元素*/
            var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;"));
            var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("herf", "#"));

            /*如果没有后一页，则末页和后一页不可点击*/
            if (result.extend.pageInfo.hasNextPage==false) {
                nextPageLi.addClass("disabled");
                lastPageLi.addClass("disabled");
            }else {
                /*添加单击事件*/
                nextPageLi.click(function () {
                    to_page(result.extend.pageInfo.pageNum+1);
                });
                lastPageLi.click(function () {
                    to_page(result.extend.pageInfo.pages);
                });
            }

            /*添加首页和前一页*/
            ul.append(firstPageLi).append(prePageLi);

            $.each(result.extend.pageInfo.navigatepageNums, function (index, item) {
                var numLi = $("<li></li>").append($("<a></a>").append(item));
                if (result.extend.pageInfo.pageNum == item) {
                    numLi.addClass("active");
                }
                /*点击此页时候，跳转到这一页*/
                numLi.click(function () {
                    to_page(item);
                });
                ul.append(numLi);
            })

            ul.append(nextPageLi).append(lastPageLi);

            var navEl = $("<nav></nav>").append(ul);
            navEl.appendTo("#page_nav_area");
        }

        //清空表单样式和内容
        function reset_form(ele){
            $(ele)[0].reset();
            //清空表单样式
            $(ele).find("*").removeClass("has-error has-success");
            $(ele).find(".help-block").text("");
        }


        /*员工添加按钮点击时的js函数*/
        $("#emp_add_model_btn").click(function () {

            //表单重置(需进行表单完整重置)
            reset_form("#empAddModel form");

            /*查询部门信息，显示在下拉框中*/
            getDepts("#empAddModel select");
            /*弹出模态框*/
            $("#empAddModel").modal({
                backdrop:"static"
            });
        });

        /*查出所有的部门信息并显示在下拉列表中*/
        function getDepts(ele) {
            //先清空下拉列表中的内容再填充
            $(ele).empty();
            $.ajax({
                url:"${APP_PATH}/depts",
                type:"GET",
                success:function (result) {
                    console.log(result);
                    /*显示在下拉列表中*/
                    $.each(result.extend.depts,function (index,items) {
                        var optionElement = $("<option></option>").append(this.deptName).attr("value", this.deptId);
                        optionElement.appendTo(ele);
                    });
                }
            });
        }

        /*为模态框的保存按钮添加点击事件*/
        $("#emp_save_btn").click(function () {
            /*将模态框中填写的数据提交给服务器进行保存*/
            //1.对要进行的数据先进行校验
           /* if(!validate_add_form()){
                return false;
            }*/

            //2.接收用户名可用信息
            if($(this).attr("ajax-value")=="error"){
                return false;
            }

            //3.发送ajax请求保存员工信息
            $.ajax({
                url:"${APP_PATH}/emp",
                type:"POST",
                /*serialize函数将from表单中的数据，序列化为键值对的形式*/
                data:$("#empAddModel form").serialize(),
                success:function (result) {
                    //alert(result.msg);
                    if(result.code == 100){
                        //员工保存成功之后，要进行如下变化
                        //1.关闭模态框
                        $("#empAddModel").modal("hide");
                        //2.跳转到最后一页，显示刚才保存的数据
                        //因为此插件有安全机制，所以传入一个无穷大值，则显示最后一页
                        to_page(totalRecord);
                    }else{
                        //用户校验失败 显示失败信息
                        if(undefined != result.extend.errorFields.email){
                            //显示邮箱错误信息
                            show_validate_msg("#emp_email_input","error",result.extend.errorFields.email);
                        }
                        if(undefined !== result.extend.errorFields.empName){
                            //显示用户名错误信息
                            show_validate_msg("#emp_name_input","error",result.extend.errorFields.empName);
                        }
                    }
                }
            });
        });

        /**
         * 对新添加的员工数据进行校验
         */
        function validate_add_form() {
            //获取到要校验的数据，校验姓名和email
            var empName = $("#emp_name_input").val();
            var regName = /(^[a-z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5}$)/;
            if(!regName.test(empName)){
                show_validate_msg("#emp_name_input","error","姓名可以是6-16位字符，或2-5位汉字");
                return false;
            }else {
                show_validate_msg("#emp_name_input","success","");
            }
            //校验邮箱信息
            var email = $("#emp_email_input").val();
            var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
            if(!regEmail.test(email)){
                show_validate_msg("#emp_email_input","error","请输入正确的邮箱地址");
                return false;
            }else{
                show_validate_msg("#emp_email_input","success","");
                return true;
            }
        }

        /**
         * 显示校验信息
         */
        function show_validate_msg(ele,status,msg) {
            $(ele).parent().removeClass("has-success has-error");
            $(ele).next("span").text("");
            if("success"==status){
                $(ele).parent().addClass("has-success");
                $(ele).next("span").text(msg);
            }else if("error"==status){
                $(ele).parent().addClass("has-error");
                $(ele).next("span").text(msg);
            }
        }

        /**
         * 当输入新的用户名，发送ajax请求判断此用户名是否可用
         */
        $("#emp_name_input").change(function () {
            var empName = this.value;
            $.ajax({
                url:"${APP_PATH}/checkuser",
                data:"empName="+empName,
                type:"GET",
                success:function (result) {
                    if(result.code==100) {
                        //成功
                        show_validate_msg("#emp_name_input","success","用户名可用");
                        $("#emp_save_btn").attr("ajax-value","success");
                    }else if(result.code==200){
                        show_validate_msg("#emp_name_input","error",result.extend.va_msg);
                        $("#emp_save_btn").attr("ajax-value","error");
                    }
                }
            });
        });

        //我们是按钮创建之前就绑定了click，所以绑定不上
        //1：我们可以在创建按钮的时候绑定事件，但那样耦合度太高不推荐
        //2：绑定点击.live方法，在新版本中已更改为on方法
        $(document).on("click", ".edit_btn", function () {

            // 1:查出部门信息，并显示部门列表
            getDepts("#empUpdateModal select");
            // 2:查出员工信息，显示员工信息
            getEmpName($(this).attr("edit-id"));
            // 3.传递员工id给更新按钮
            $("#emp_update_btn").attr("edit-id",$(this).attr("edit-id"));

            $("#empUpdateModal").modal({
                backdrop: "static"
            });
        });


        /**
         * 使用ajax请求获取对应id的employee信息
         */
        function getEmpName(id) {
            $.ajax({
                url : "${APP_PATH}/emp/"+id,
                type : "GET",
                success:function (result) {
                    var empData = result.extend.emp;
                    $("#emp_name_update_static").text(empData.empName);
                    $("#emp_email_update").val(empData.email);
                    $("#empUpdateModal input[type=radio]").val([empData.gender]);
                    $("#empUpdateModal select").val([empData.dId]);
                }
            });
        }

        /**
         * 更新员工信息
         */
        $("#emp_update_btn").click(function () {
            //验证邮箱是否合法
            var email = $("#emp_email_update").val();
            var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
            if(!regEmail.test(email)){
                show_validate_msg("#emp_email_update","error","请输入正确的邮箱地址");
                return false;
            }else{
                show_validate_msg("#emp_email_update","success","");
            }
            //发送ajax请求保存更新的员工数据
            $.ajax({
                url:"${APP_PATH}/emp/"+$(this).attr("edit-id"),
                type:"PUT",
                data:$("#empUpdateModal form").serialize(),
                success:function(){
                    //关闭模态框
                    $("#empUpdateModal").modal("hide");
                    //回到主页面
                    to_page(currentNum);
                }
            });
        });

        //实现全选或全不选
        $("#check_all").click(function () {
            //使用prop修改和读取dom原生属性的值
            var isSelect = $(this).prop("checked");
            $(".check_item").prop("checked",isSelect);
        });

        //为check_item绑定事件，当五个全选中时候，上面全选框也必须选中
        $(document).on("click", ".check_item", function () {
            //判断当前选中的元素 是否是当前页面元素个数
            var flag = $(".check_item:checked").length==$(".check_item").length;
            $("#check_all").prop("checked",flag);
        });

        //给删除按钮添加单击事件(单个删除)
        $(document).on("click", ".delete_btn", function () {
            //1：弹出是否确认删除
            var empName = $(this).parents("tr").find("td:eq(2)").text();
            if(confirm("确认删除【"+empName+"】？")){
                //确认之后，发送ajax请求删除即可
                $.ajax({
                    url:"${APP_PATH}/emp/"+$(this).attr("delete-id"),
                    type:"DELETE",
                    success:function () {
                        alert(result.msg);
                        //回到本页
                        to_page(currentNum);
                    }
                });
            }
        });

        //点击批量删除按钮，全部删除
        $("#emp_delete_all_model_btn").click(function () {
            var names = "";
            var ids = "";
            $.each($(".check_item:checked"), function () {
                //组装员工姓名字符串
                names += $(this).parents("tr").find("td:eq(2)").text() + ",";
                //组装员工id字符串
                ids += $(this).parents("tr").find("td:eq(1)").text() + "-";
            });
            //去除names中多余的字符
            names = names.substring(0,names.length-2);
            ids = ids.substring(0,ids.length-2);

            if(confirm("确认删除【"+names+"】?")){
                //发送ajax请求删除用户
                $.ajax({
                    url:"${APP_PATH}/emp/"+ids,
                    type:"DELETE",
                    success:function (result) {
                        alert(result.msg);
                        //回到当前页面
                        to_page(currentNum);
                    }
                });
            }

        });


    </script>
</body>
</html>
